<template>
	<view>

		<!-- <uni-row class="demo-uni-row">
			<uni-col :span="4">
				<view class="demo-uni-col dark" style="line-height: 56px;text-align: center;" @click="ckfeil()">
					{{location_text}}
				</view>
			</uni-col>
			<uni-col :span="20">
				<view class="demo-uni-col dark" style="width: 100%;">
					<uni-search-bar style="margin-right: 10px;" @confirm="" @input=""></uni-search-bar>
				</view>
			</uni-col>
		</uni-row> -->
		<view style="position: relative;">
			<swiper style="" autoplay circular class="banner-wrapper" indicator-dots>
				<swiper-item v-for="(item,index) in material.album" :key="index" class="banner" style="text-align: center;">
					<view style="padding: 10px;">
						<image style="width: 100%;margin: 0 auto;" :src="item" class="banner-image" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		
		</view>
		

		<uni-row class="demo-uni-row" style="margin: 10px;">
			<uni-col :span="12">
				<view style="margin-right: 5px;" @click="jumpto('/pages/index/service')">
					<image style="width: 100%;height: 204px;border-radius: 10px;" src="../../static/jiadianweixiu.png">
					</image>
				</view>
			</uni-col>
			<uni-col :span="12">
				<view @click="jumpto('/pages/index/job')">
					<image style="width: 100%;height: 100px;border-radius: 10px;"
						src="../../static/shouhouzhongxin.png"></image>
				</view>
				<!-- <view>
					<image style="width: 100%;height: 100px;border-radius: 10px;"
						src="../../static/jiadianshangcheng.png"></image>
				</view> -->
				<view @click="toshop">
					<image style="width: 100%;height: 100px;border-radius: 10px;"
						src="../../static/jiadianshangcheng.png"></image>
				</view>
			</uni-col>
		</uni-row>

		<uni-row class="demo-uni-row" style="margin: 10px;">
			<uni-col :span="12">
				<view class="demo-uni-col dark" style="font-weight: bold;font-size: 18px;">热门服务</view>
			</uni-col>
			<uni-col :span="12">
				<view class="demo-uni-col dark" style="text-align: right;"></view>
			</uni-col>
		</uni-row>

		<uni-row class="demo-uni-row" style="margin: 10px;">
			<uni-col :span="8">
				<image @click="serviceAdv(3)" style="width: 100%;border-radius: 10px;height: 120px;"
					src="../../static/kongtiaoweixiu.png"></image>
			</uni-col>
			<uni-col :span="8" style="padding: 0 5px;">
				<image @click="serviceAdv(1)" style="width: 100%;border-radius: 10px;height: 120px;"
					src="../../static/bingxiangweixiu.png"></image>
			</uni-col>
			<uni-col :span="8">
				<image @click="serviceAdv(4)" style="width: 100%;border-radius: 10px;height: 120px;"
					src="../../static/diannaoweixiu.png"></image>
			</uni-col>
		</uni-row>

		<view style="position: fixed;bottom: 20px;width: 100%;">
			<view
				style="width: 90%;margin: 0 auto;display: flex;background-color: #fff;line-height: 36px;background-color: #fff;z-index: 99;border-radius: 5px;color: gray;">
				<view style="flex: 1;" @click="jumpto('/pages/user/center')">
					<view :class="{active: sel_tab == 0}" style="width: 40px;margin: 0 auto;text-align: center;">首页
					</view>
				</view>
				<view style="flex: 1;" @click="jumpto('/pages/order/index')">
					<view :class="{active: sel_tab == 1}" style="width: 40px;margin: 0 auto;text-align: center;">订单
					</view>
				</view>
				<view style="flex: 1;" @click="jumpto('/pages/user/center')">
					<view :class="{active: sel_tab == 2}" style="width: 40px;margin: 0 auto;text-align: center;">我的
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				sel_tab: 0,
				location_text: '中山',
				material: {
					album: [
						'/static/banner1.png',
						'/static/banner2.png',
						// 'https://app-file.beitaichufang.com/img/H5/web/banner/banner20.jpg',
						// 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile03.16sucai.com%2F2017%2F1100%2F16sucai_p566c008_052.JPG&refer=http%3A%2F%2Ffile03.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644203457&t=7147c6cab84d4277c67739a9438c3e12',
						// 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile03.16sucai.com%2F2017%2F1100%2F16sucai_p566c008_052.JPG&refer=http%3A%2F%2Ffile03.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644203457&t=7147c6cab84d4277c67739a9438c3e12',
						// 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fb21bb051f8198618e086f0df46ed2e738ad4e6ac.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644203783&t=0bb89834b706a1f64e35af612ba3fae7',
						// 'https://app-file.beitaichufang.com/img/H5/web/banner/banner20.jpg',
					]
				},
			}
		},
		onLoad() {},

		methods: {
			jumpto(url) {
				uni.navigateTo({
					url: url
				})
			},
			serviceAdv(cid) {
				uni.setStorageSync('tmp_cid', cid)
				uni.navigateTo({
					url: '/pages/index/service_adv'
				})
			},

			toshop() {
				window.location.href = "http://jzyj-mall.lin0211.com";
			},

			ckfeil() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log(res)
						this.addrDel = res;
					},
					fail: function() {
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					}
				});
			},
		}

	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.active {
		border-bottom: 3px solid #007AFF;
		color: #007AFF;
	}

	.wishes-wrapper {

		// margin-right: -5px;
		.wish {
			width: 49%;
			text-align: center;
			vertical-align: top;
			background: #fff;
			border-radius: 10px;
			width: rpx(349);
			display: inline-block;
			margin-right: 5px;
			font-size: 14px;
			margin: 0 0 10px 0;

			&.create {
				min-height: 227.8px;

				.wish-content {
					display: flex;
					flex-direction: column;
					border-radius: 10px 10px 0 0;
					border: 1px solid #eee;
					padding-bottom: 10px;
					text-align: left;

					image {
						height: 140px;
						width: 100%;
					}
				}
			}
		}

		.wish:nth-child(even) {
			vertical-align: top;
			background: #fff;
			border-radius: 10px;
			width: rpx(349);
			display: inline-block;
			font-size: 14px;
			float: right;
			margin: 0 0 10px 0;

			&.create {
				min-height: 227.8px;

				.wish-content {
					display: flex;
					flex-direction: column;
					border-radius: 10px 10px 0 0;
					border: 1px solid #eee;
					padding-bottom: 10px;
					text-align: left;

					image {
						height: 140px;
						width: 100%;
					}
				}
			}
		}
	}
</style>
